<template>
   <div>
       <div class="logo"></div>
<div class="index-view"> 
    <div class="wrapper"> 
    <div class="wrapper-inner"> 
      <div class="left"> 
        <div class="panel"> 
          <div class="user">
             <div class=clearfix> 
                <img class="avatar" src="../../assets/web/1.jpg" alt=姓名>
                <span class="user-name">{{username}}</span> <i class="iconfont trans">&#xe615;</i>
              </div> 
              <div class="user-exit"> 
                  <p class=hello>你好，<span class=J_user_name>{{username}}</span></p> 
                  <p class="exit J_exit" @click="quit">退出</p> 
              </div> 
            </div> 
            <!-- 左侧导航栏 -->
            <left-nav></left-nav>
          </div> 
      </div> 
      <div class="center"> 
          <router-view></router-view>
      </div> 
      <div class="right">
          <div class="rightList">
              <div class="nameList">
                  <div class="page-nav">
                      <div class="back" @click="goback">                          
                        <i class="iconfont arrow-left">&#xe613;</i><span>返回</span>                        
                      </div>
                      <p class="title">岗前培训系统</p>
                  </div>
              </div>
              <p class="control-desc">请注意：点击结束培训后，属于该期培训的学员数据、材料将不可更改。</p>
              <div class="courseEnd" @click="finishTrain">结束培训</div>
              <div class="qrImg">
                  <p>学员扫码进入课堂</p>
                  <!-- <img id="qrcode" alt=""> -->
                  <div id="qrcode" ref="qrcode" class="qrcodeimg"></div>
              </div>
          </div>
      </div>
    
    </div> 
  </div> 

 
</div> 
   </div> 
</template>
<script>
import LeftNav from "@/components/web/left-nav.vue";
import QRCode from "qrcodejs2";
export default {
  components: {
    LeftNav
  },
  data() {
    return { 
      // username: JSON.parse(localStorage.getItem("teacherinfo")).Te_name
      username: JSON.parse(this.$store.state.teacherinfo).Te_name
    };
  },
  mounted: function() {
    this.$axios
      .get("/OpenCourse/" + this.$store.state.isaz + "/V2", {})
      .then(json => {
        // console.log("111:" + json.data);
        if (json.data == "loginout") {
          this.$message({
            type: "info",
            message: "登录信息失效，请重新登录！"
          });
          this.$router.push("/login");
        } else if (json.data != null) {
          this.$store.commit('dtidinfo',json.data);
          // localStorage.setItem("dtid", json.data);
          this.qrCode = new QRCode("qrcode", {
            width: 200, //二维码宽度，单位像素
            height: 200, //二维码高度，单位像素
            text: this.$store.state.httpapp + "?dtid=" + json.data, //二维码中的内容
            colorDark: "#000000", //前景色
            colorLight: "#ffffff", //背景色
            correctLevel: QRCode.CorrectLevel.H //容错级别，
          });
        } else {
          this.$message({
            type: "info",
            message: "获取期数失败！"
          });
          this.$router.push("/selectPosition");
        }
      });
  },
  methods: {
    goback: function() {
      this.$router.push("/selectPosition");
    },
    finishTrain: function() {
      this.$axios
        .get("/OpenCourse/" + this.$store.state.dtid + "/V4")
        .then(json => {
          if (json.data == "loginout") {
            this.$message({
              type: "info",
              message: "登录信息失效，请重新登录！"
            });
            this.$router.push("/login");
          } else if (json.data == "fail") {
            this.$message({
              type: "error",
              message: "培训信息获取失败！"
            });
          } else {
            var msg =
              (json.data.pass == ""
                ? ""
                : "<strong style='color:blue'>" +
                  json.data.pass +
                  "</strong>" +
                  " 已完成培训，") +
              (json.data.notpass == ""
                ? ""
                : "<strong style='color:red'>" +
                  json.data.notpass +
                  "</strong>" +
                  " 未完成培训，");
            if (json.data.pass == "" && json.data.notpass == "") {
              msg = "无人完成此次培训，";
            }
            this.$confirm(msg + "确定要结束此次培训吗?", "提示", {
              dangerouslyUseHTMLString: true
            })
              .then(() => {
                this.$axios
                  .put("/OpenCourse/" + this.$store.state.dtid + "/V3")
                  .then(json => {
                    if (json.data == "loginout") {
                      this.$message({
                        type: "info",
                        message: "登录信息失效，请重新登录！"
                      });
                      this.$router.push("/login");
                    } else if (json.data == "fail") {
                      this.$message({
                        type: "error",
                        message: "培训结束失败！"
                      });
                    } else {
                      var msg =
                        (json.data.pass == ""
                          ? ""
                          : "<strong style='color:blue'>" +
                            json.data.pass +
                            "</strong>" +
                            " 已通过培训，") +
                        (json.data.notpass == ""
                          ? ""
                          : "<strong style='color:red'>" +
                            json.data.notpass +
                            "</strong>" +
                            " 未通过培训，") +
                        "请知悉！";
                      if (json.data.pass == "" && json.data.notpass == "") {
                        msg = "无人通过此次培训，请知悉！";
                      }
                      this.$alert(msg, "提示", {
                        confirmButtonText: "确定",
                        dangerouslyUseHTMLString: true
                      });
                      this.$router.push("/selectPosition");
                    }
                  })
                  .catch(error => {});
              })
              .catch(error => {
                this.$router.push("/selectcourse/datacheck");
              });
          }
        })
        .catch(() => {});
    },
    quit: function() {
      this.$confirm("确定要退出登录吗?", "提示").then(() => {
        this.$router.push("/login");
      });
    }
  }
};
</script>
<style scoped>
@font-face {
  font-family: "iconfont"; /* project id 1492498 */
  src: url("//at.alicdn.com/t/font_1492498_0vozvvvqxzl8.eot");
  src: url("//at.alicdn.com/t/font_1492498_0vozvvvqxzl8.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/font_1492498_0vozvvvqxzl8.woff2") format("woff2"),
    url("//at.alicdn.com/t/font_1492498_0vozvvvqxzl8.woff") format("woff"),
    url("//at.alicdn.com/t/font_1492498_0vozvvvqxzl8.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_1492498_0vozvvvqxzl8.svg#iconfont")
      format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.logo {
  background: url("../../assets/web/bg.jpg");
  background-size: 100% 100%;
  height: 100%;
  position: fixed;
  width: 100%;
  margin: -8px;
}
.index-view,
.wrapper {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
.wrapper {
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% 100%;
}
.wrapper-inner {
  margin: 0 auto;
  width: 85%;
  min-width: 1000px;
  height: 100%;
}
.left {
  position: relative;
  width: 180px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  min-height: 667px;
  /* border:1px solid red; */
  float: left;
}
.left .panel {
  max-height: 667px;
  padding-top: 54px;
}
.left .panel .user {
  position: relative;
  line-height: 64px;
  padding-bottom: 22px;
  color: #fff;
  border-bottom: 1px solid #fff;
  font-size: 18px;
  cursor: pointer;
}
.left .panel .user .avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  vertical-align: middle;
}
.left .panel .user .user-name {
  overflow: hidden;
  text-align: center;
  width: 80px;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
}
.left .panel .user .iconfont {
  padding-right: 3px;
  font-size: 10px;
  cursor: pointer;
}
.left .panel .user .user-exit {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  line-height: 10px;
  text-align: center;
  font-size: 18px;
  color: #4a4a4a;
  background-color: #fff;
  display: none;
}
.left .panel .user:hover .user-exit {
  display: block;
}
.left .panel .user:hover .trans {
  display: inline-block !important;
  transform: rotate(180deg) !important;
  -webkit-transform: rotate(180deg) !important;
}
.left .panel .user .user-exit .hello {
  line-height: 1.5;
  padding: 8px 0;
  border-bottom: 1px solid #9b9b9b;
  margin: 0 10px;
}
.left .panel .user .user-exit .exit {
  color: #e43828;
  cursor: pointer;
}

.left .panel .nav-list .nav-item:hover {
  border-bottom: 1px solid #64a4f6;
}
.center {
  position: relative;
  margin: 0 auto;
  width: calc(100% - 435px);
  min-width: 570px;
  height: 650px;
  /* border:1px solid blue; */
  float: left;
  background: white;
  margin-left: 35px;
  margin-top: 50px;
}
.right {
  position: relative;
  width: 180px;
  height: 100%;
  min-height: 667px;
  /* border:1px solid green; */
  float: right;
}
.rightList {
  padding-top: 54px;
  max-height: 667px;
  color: #fff;
}
.nameList {
  width: 240px;
  border-bottom: 1px solid #fff;
}
.page-nav {
  padding: 20px 0 0 0;
  font-size: 24px;
}
.back {
  width: 75px;
  padding: 0 0px 0 11px;
  border: 1px solid white;
  border-radius: 18px;
  line-height: 30px;
  cursor: pointer;
}
.arrow-left {
  font-size: 25px;
  vertical-align: bottom;
}
.page-nav span {
  font-size: 14px;
}

.title {
  font-weight: 400;
  font-size: 24px;
  margin: 50px 0 15px 0;
}
.control-desc {
  font-size: 16px;
  color: #c8c8c8;
}
.courseEnd {
  margin: 30px 0 0;
  width: 180px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background: #639ef4;
  border-radius: 3px;
  cursor: pointer;
}
.courseEnd:hover {
  opacity: 0.8;
}
.qrImg {
  position: absolute;
  bottom: 0;
}
.qrImg p {
  text-align: center;
}
.qrImg img {
  width: 200px;
  height: 200px;
}
.qrcodeimg {
  padding: 10px;
  text-align: center;
  background: #fff;
}

@media screen and (min-width: 1441px) and (max-width: 1960px) {
  .center {
    height: 750px;
  }
}
</style>
